<?php
/**
 * Created by PhpStorm.
 * User: linyh
 * Date: 2017/11/25 0025 10:13
 */
?>
<link rel="stylesheet" href="/css/dataTables.bootstrap.min.css">
<!--<div class="content-wrapper">-->
<!-- Content Header (Page header) -->
<!--<section class="content-header">
    <h1>
        原料水晶
        <small>advanced tables</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Tables</a></li>
        <li class="active">Data tables</li>
    </ol>
</section> -->

<!-- Main content -->
<section class="content">
<div class="row">
    <div class="col-xs-12">
        <div class="box-body" style="text-align: center">
            <div class="row">
                <div class="col-xs-1 col-sm-1 col-md-2">
                </div>
                <div class="col-xs-5 col-sm-5 col-md-4" style="vertical-align: middle;">
                    <p style="font-size: 2em;text-align: right;vertical-align: middle;padding-top: 0.1em;">原料水晶等级：  <small id="level"></small>级</p>
                    <!--原料水晶等级：<span id="level"></span>级 -->
                </div>
                <div class="col-xs-5 col-sm-5 col-md-4">
                <button type="button" class="btn btn-block btn-success btn-lg" style="width: 6em;margin-left: 1.5em;" data-toggle="modal" data-target="#modal-default">升级</button>
                </div>
                <div class="col-xs-1 col-sm-5 col-md-3">
                </div>
            </div>
        </div>
        <div class="modal fade" id="modal-default">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span></button>
                        <h4 class="modal-title text-center">升级原料水晶</h4>
                    </div>
                    <div class="modal-body text-center">
                        <p>此次升级消耗 <span id="upgrade-price"></span> 货币，确认升级原料水晶等级？</p>
                    </div>
                    <div class="modal-footer">
                        <div class="row">
                        <div class="col-xs-6 text-center">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                        <div class="col-xs-6 text-center">
                        <button type="button" class="btn btn-success" id="upgrade">确认</button>
                        </div>
                        </div>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <div class="box">
            <!--<div class="box-header">
                <h3 class="box-title">所有原料</h3>
            </div> -->
            <!-- /.box-header -->
            <div class="box-body">
                <table id="table" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>原料类别</th>
                        <th>原料名称</th>
                        <th>库存</th>
                        <th>单位</th>
                        <th>价格</th>
                        <th>国家</th>
                        <th>等级</th>
                        <th width="1%">数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <button id="buy" class="btn btn-block btn-success">确认购买</button>
            </div>
        </div>
    </div>
</div>
</section>

<script src="/js/jquery.dataTables.min.js"></script>
<script src="/js/dataTables.bootstrap.min.js"></script>
<script>
var $table = $('#table');
var $tr = $table.find('tbody tr').remove();
$.ajax('/api/material/list', {
    type: 'GET',
    data: {
    },
    dataType: 'json',
    headers: {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'}
}).then(function(ret) {
    if(ret.state ==0) {
        data = ret.data;
        $('#table').DataTable({
            "columnDefs": [
                {
                    "targets": 7,
                    "data": "title",
                    "render": function ( data, type, row, meta ) {
                        if(row.level <= global.user.material_level && row.country.name == global.user.country.name) {
                            return '<input class="text-center" type="number" min="1" name="num" lk-id="' + row.id + '"/>';
                        } else {
                            return '不可购买';
                        }
                    }
                }
            ],
            data: data.list,
            columns: [
                { data: 'attribute' },
                { data: 'name' },
                { data: 'inventory' },
                { data: 'unit' },
                { data: 'price' },
                { data: 'country.name' },
                { data: 'level' },
                { data: 'id' },
            ],
            'paging'      : true,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false
        })
        $("table tr th").css({"text-align":"center"});
        $("table").css({"text-align":"center"});
    } else {
        alert(ret.message);
    }
});

var ifRefresh = false;
$('#buy').click(function() {
    if(ifRefresh) {
        location.href = '/user/material';
        return;
    }
    $('input[name=num]').attr('disabled', 1).each(function() {
        var $this = $(this);
        if($this.val()>0) {
            $.ajax('/api/material/buy', {
                type: 'post',
                data: {
                    'material_id': $this.attr('lk-id'),
                    'num': $this.val(),
                },
                dataType: 'json',
                headers: {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'}
            }).then(function(ret) {
                if(ret.state ==0) {
                    $this.parent().text('购买成功');
                } else {
                    $this.parent().text(ret.message);
                }
            });
        } else {
            $this.parent().text('-');
        }
    });
    $('#buy').text('交易结束，查看我的库存').removeClass('btn-primary');
    ifRefresh = true;
})
$(function() {
    $('#upgrade-price').text(
        (global.user.material_level - global.config['upgrade-min-level']) * global.config["upgrade-increase-cost"] +
        global.config['upgrade-base-cost'] * 1
    );
    $('#level').text(global.user.material_level);
})
$('#upgrade').click(function() {
    $.ajax('/api/user/level-up', {
        type: 'post',
        data: {
        },
        dataType: 'json',
        headers: {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'}
    }).then(function(ret) {
        if(ret.state ==0) {
            alert('升级成功');
            location.reload();
        } else {
            alert(ret.message);
        }
    });
})
</script>